<template>
    <BasePage>
        <el-form slot="form" :inline="true" size="medium" @submit.native.prevent>
            <el-form-item label="巡查类型">
                <el-select v-model="form.type" clearable placeholder="请选择" style="width: 100%">
                    <el-option v-for="item in patrolTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="巡查部门">
                <OrgSelect :value.sync="form.deptId" clearable />
            </el-form-item>
            <el-form-item label="公路名称">
                <RoadSelect :value.sync="form.highwayCode" clearable />
            </el-form-item>
            <el-form-item label="任务生成日期">
                <el-date-picker
                    v-model="form.date"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    :editable="false"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </el-form-item>
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c8_d16_2' }" @click="handleFilter">查询</BaseButton>
                <BaseButton type="second" @click="resetConditions">重置</BaseButton>
            </el-form-item>
        </el-form>

        <div slot="button">
            <BaseButton v-permission="{ btnCode: 'dlyh_c8_d18_2' }" :loading="refreshLoading" @click="handleRefresh">刷新巡查任务</BaseButton>
        </div>

        <!--数据列表区-->
        <BaseTable slot="table" v-loading="listLoading" :columns="columns" :data="list" row-key="id" height="calc(100% - 73px)" highlight-current-row>
            <template #number="{ scope: { row } }">
                <BaseButton type="text" @click="handleDetail(row.id)">{{ row.number }}</BaseButton>
            </template>
            <template #statusName="{ scope: { row } }">
                <span :class="colorMap[row.status]">{{ row.statusName }}</span>
            </template>
            <template #handle="{ scope: { row } }">
                <BaseButton v-show="row.status !== 4" v-permission="{ btnCode: 'dlyh_c8_d19_2' }" type="text" @click="handleAdd(row)">记录结果</BaseButton>
                <BaseButton v-show="row.status === 4" v-permission="{ btnCode: 'dlyh_c8_d20_2' }" type="text" @click="handleDownload(row.number, row.typeName)">
                    下载巡查记录表
                </BaseButton>
            </template>
        </BaseTable>
        <!--分页组件-->
        <Pagination
            slot="pagination"
            :current-page.sync="page.pageNo"
            :page-size.sync="page.pageSize"
            :total="page.total"
            @current-change="getList"
            @size-change="getList"
        />
    </BasePage>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import { InspectionTaskModel } from '@/models'
import { InspectionRecordApi } from '@/api'
import downLoad from '@/utils/blob-download'
import { patrolType } from '../../constants'
import KeepAliveHandler from '@/mixins/keepAliveHandler'
import { cloneDeep } from 'lodash-es'

export default {
    name: 'TaskList',
    components: {
        BasePage
    },
    mixins: [
        KeepAliveHandler({
            defaultCondition: {
                date: [],
                type: null,
                deptId: [],
                highwayCode: null
            },
            conditionObjKey: 'form'
        })
    ],
    data() {
        return {
            patrolTypeOptions: patrolType,
            refreshLoading: false,
            model: new InspectionTaskModel(),
            recordApi: new InspectionRecordApi(),
            form: { date: [], deptId: [] },
            listLoading: true,
            list: [],
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            columns: Object.freeze([
                {
                    slot: 'number',
                    attrs: {
                        prop: 'number',
                        label: '编号',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'typeName',
                        label: '巡查类型',
                        'show-overflow-tooltip': true,
                        'min-width': '160'
                    }
                },
                {
                    attrs: {
                        prop: 'repetitionPeriod',
                        label: '重复周期',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'deptName',
                        label: '巡查部门',
                        'show-overflow-tooltip': true,
                        'min-width': '160'
                    }
                },
                {
                    attrs: {
                        prop: 'highwayName',
                        label: '公路名称',
                        'show-overflow-tooltip': true,
                        width: '160'
                    }
                },
                {
                    attrs: {
                        prop: 'inspectSection',
                        label: '巡查路段',
                        'show-overflow-tooltip': true,
                        'min-width': '160'
                    }
                },
                {
                    attrs: {
                        prop: 'startDate',
                        label: '任务生成日期',
                        'show-overflow-tooltip': true,
                        width: '140'
                    }
                },
                {
                    attrs: {
                        prop: 'endDate',
                        label: '任务截止日期',
                        'show-overflow-tooltip': true,
                        width: '140'
                    }
                },
                {
                    slot: 'statusName',
                    attrs: {
                        prop: 'statusName',
                        label: '任务状态',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '140',
                        fixed: 'right'
                    }
                }
            ]),
            colorMap: {
                1: '',
                2: 'color-red',
                3: 'color-yellow',
                4: 'color-green'
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async handleRefresh() {
            this.refreshLoading = true
            await this.resetConditions()
            this.refreshLoading = false
        },
        getList() {
            this.listLoading = true
            const data = cloneDeep(this.form)
            data.startDate = data.date ? data.date[0] : null
            data.endDate = data.date ? data.date[1] : null
            data.deptId = data.deptId.toString()

            // 根据部门限制数据权限
            const user = this.$store.getters.user
            const departs = user.depart.map((item) => item.id)
            data.deptIdList = departs
            return this.model
                .getList(data, this.page)
                .then((res) => {
                    this.list = res.list
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        // 查询
        async handleFilter() {
            this.page.pageNo = 1
            await this.getList()
        },
        handleDetail(id) {
            this.$router.push({ name: 'TaskDetail', query: { id, type: 'task' } })
        },
        handleAdd(row) {
            const typeMap = {
                1: 'AddDailyNightTask',
                2: 'AddDailyNightTask',
                3: 'AddCulvertTask',
                4: 'AddBridgeTask',
                5: 'AddRoadbedTask',
                6: 'AddTunnelTask',
                7: 'AddTunnelTask',
                8: 'AddRoadworkTask'
            }
            this.$router.push({
                name: typeMap[row.type],
                query: {
                    taskNumber: row.number,
                    type: row.type,
                    highwayCode: row.highwayCode,
                    deptIds: row.deptId,
                    startStake1: row.startStake1,
                    endStake1: row.endStake1,
                    startStake2: row.startStake2,
                    endStake2: row.endStake2
                }
            })
        },
        handleDownload(number, name) {
            const url = this.recordApi.downLoadExcel()
            downLoad(url, { taskNumber: number }, number + name, 'Zip')
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
